<template>
  <div v-if="dateIndex !== 1" class="text-align-r font-12" :class="{ 'nullCompare': !compare }">
    <div v-if="showtitle">环比上刻</div>
    <div :class="compare > 0 ? 'color-up' : 'color-down'" v-if="compare">
      {{compare}}%
      <svg-icon :icon-class="compare > 0 ? 'up-arrow' : 'down-arrow'" class="mar-b-1 mar-l-3"></svg-icon>
    </div>
    <div v-else>上刻为0</div>
  </div>
</template>
<script>
export default {
  props: {
    compare: {
      type: [String, Number],
      default: ''
    },
    showtitle: {
      type: Boolean,
      default: true
    },
    dateIndex: {
      type: Number,
      default: 1
    }
  }
}
</script>
<style lang="less" scoped>
.color-up{
  color: #FF2C1E;
}
.color-down{
  color: #30D158;
}
@media screen and (max-width: 1440px) {
  .text-align-r {
    text-align: left;
  }
}
</style>
